<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8" name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">    <title>04使用客户端字体</title>
    <link rel="stylesheet" href="../common.css">
    <script src="../jquery-2.2.0.js"></script>
    <script src="../main.js"></script>
    <style>
        #arialFont p:nth-child(1){
            font-family: Arial;
        }
        #arialFont p:nth-child(2){
            font-family: Arial;
            font-weight: bold;
        }
        #arialFont p:nth-child(3){
            font-family: ArialBold;
        }
        #arialFont p:nth-child(4){
            font-family: "Arial Black";
        }

        @font-face {
            font-family: Arial;
            font-weight: bold;
            src: local("Arial Black");
        }
        #localFont p:nth-child(1){
            font-family: Arial, sans-serif;
            font-weight: normal;
        }
        #localFont p:nth-child(2){
            font-family: Arial, sans-serif;
            font-weight: bold;
        }
    </style>
</head>
<body>
<h1>3-4使用客户端本地字体</h1>
<h2 class="problem">Arial不写加粗也会出来粗体效果，而在windows字体中打开却分别能看到每个效果（常规，加粗，斜体，粗斜体）</h2>

<h3>直接使用Arial和"Arial Black"字体</h3>
<section id="arialFont">
   <p style="font-family: Arial">这是正常的Arial字体 This is a normal font </p>
   <p>这是“font-weight: bold”的Arial字体 This is a bold font <code>font-weight: bold;</code></p>
   <p>这是ArialBold字体 This is a bold font <code>font-family: ArialBold sans-serif;</code></p>
   <p>这是Arial black字体 This is a black font <code>font-family: "Arial Black", sans-serif;</code></p>
</section>
<hr>
<h3>通过下列代码绑定后，Arial的bold字体自动调用"Arial Black"</h3>
<code>
    @font-face {
    font-family: Arial;
    font-weight: bold;
    src: local("Arial Black");
    }

</code>
<section id="localFont">
   <p>这是正常的Arial字体 This is a normal font</p>
   <p>这是绑定Arial Black后，font-weight: bold的Arial字体 This is a bold font <br>
   这时候显示的汉字是普通的Arial字体的font-weight: bold，而英文字母则是字体Arial Black</p>
</section>


</body>
</html>